<template>
  <base-layout
    dialog-title="审批处理"
    :dialog-visible="dialogVisible"
    dialogWidth="30%"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <search-panel
        ref="form"
        v-slot="{ form }"
        :addPer="'brandDetail:create'"
        :selectPer="'brandDetail:page'"
        addTitle="新建"
        @insert="add"
        @search="search"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <!-- <el-input
          v-model="form.supplierName"
          clearable
          placeholder="供应商"
          style="width: 200px"
        /> -->
        <el-select
          style="width: 150px"
          clearable
          filterable
          v-model="form.supplierName"
          placeholder="供应商"
        >
          <el-option v-for="item in supplierList" :key="item.id" :value="item.id" :label="item.supplierName"/>
        </el-select>
        <el-select
          style="width: 150px"
          clearable
          v-model="form.appLargeIdOne"
          placeholder="一级类别"
          @change="handleLargeOne"
        >
          <el-option
            v-for="item in oneList"
            :key="item.index"
            :value="item.id"
            :label="item.largeName"
          />
        </el-select>
        <el-select
          style="width: 150px"
          clearable
          v-model="form.appLargeIdTwo"
          placeholder="二级类别"
        >
          <el-option
            v-for="item in twoList"
            :key="item.id"
            :value="item.id"
            :label="item.largeName"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="请选择品牌"
          @change="handleCarBrand"
        >
          <el-option
            v-for="item in allBrand"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
        <el-select
          style="width: 150px"
          clearable
          v-model="form.seriesId"
          placeholder="请选择车系"
        >
          <el-option
            v-for="item in allSeries"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.auditState"
          placeholder="上架审核"
        >
          <el-option
            v-for="item in getDict(['上架审核'])"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input
          v-model="form.orderNo"
          clearable
          placeholder="精品编号/名称"
          style="width: 200px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <!-- <i
            class="el-icon-view"
            title="查看"
            style="margin-left: 15px; cursor: pointer"

            @click="view(row)"
          ></i> -->
          <i
            class="el-icon-edit"
            title="修改"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'brandDetail:update'"
            @click="updateUser(row)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            v-permission="'brandDetail:delete'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
          <i
            v-if="row.auditState == 1"
            class="el-icon-s-claim"
            title="审核"
            v-permission="'brandDetail:check'"
            style="margin-left: 15px; cursor: pointer"
            @click="handleApply(row)"
          ></i>
          <!-- {{row.putaway}}-----{{row.auditState }} -->

        </template>
      </data-table>
    </template>

    <template #dialog>
      <el-form
        ref="applyForm"
        :rules="rules"
        :model="applyForm"
        label-width="100px"
      >
        <el-form-item label="审批处理:" prop="auditState">
          <el-radio-group v-model="applyForm.auditState">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remarks">
          <el-input type="textarea" v-model="applyForm.remarks" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="apply('applyForm')">确 定</el-button>
      </div>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getList,
  getOneList,
  getTwoList,
  changeStatus,
  applyCheck,
  deleteQ,
} from '@/api/pre-sale/qualityManagement/quality'
import { getDict } from '@/utils/index'
import {
  getSupplierByStorId,
  details,
} from '@/api/after-sale/systemManage/supplier'

// import { changeStatus } from '@/api/after-sale/personnel/workstation'
import { getAllBrand, getSeries } from '@/api/after-sale/systemManage/carModel'
const d = ['未审核', '待审核', '已审核', '审核不通过']
const c = ['下架', '上架']
import { mapGetters } from 'vuex'

export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      deleteData: deleteQ,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.statusText = c[data.putaway]
          data.auditStateText = d[data.auditState]
          return data
        })
      },
    }),
  ],

  data() {
    return {
      supplierList:[],
      applyForm: {
        auditState: 2,
        remarks: '',
      },
      rules: {
        auditState: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change'],
          },
        ],
        remarks: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
      },
      allBrand: [], // 品牌
      allSeries: [], // 车系
      oneList: [],
      twoList: [],
      getDict: getDict,
      form: {
        appLargeIdOne: '',
        appLargeTwo: '',
        orderNo: '', // 客户信息
      },
      tableColumnAttributes: [
        {
          name: '所属门店',
          value: 'storeName',
          type: 'text',
        },
        {
          name: '精品编号',
          value: 'orderNo',
          type: 'text',
        },
        {
          name: '精品名称',
          value: 'name',
          type: 'text',
        },
        {
          name: '精品一级类别',
          value: 'appLargeOne',
          type: 'text',
        },
        {
          name: '精品二级类别',
          value: 'appLargeTwo',
          type: 'text',
        },
        {
          name: '适用品牌',
          value: 'carBrandName',
          type: 'text',
        },
        {
          name: '适用车型',
          value: 'modelName',
          type: 'text',
        },
        {
          name: '精品资源',
          value: 'resource',
          type: 'dict',
          dict: '用品属性',
        },
        {
          name: '售价',
          value: 'currentPrice',
          type: 'text',
        },
        {
          name: '成本价',
          value: 'costPrice',
          type: 'text',
        },
        {
          name: '供应商',
          value: 'supplierName',
          type: 'text',
        },
        {
          name: '供应商编号',
          value: 'supplierCode',
          type: 'text',
        },
        {
          name: '上架状态',
          value: 'statusText',
          type: 'switch',
          switchPer: 'brandDetail:status',
          width: 100,
          valueId: 'putaway',
          activeValue: 1,
          inactiveValue: 0,
          action: (row) => {
            let params = {
              id: row.id,
              putaway: row.putaway,
            }
            changeStatus(params).then((res) => {
              this.search()
            })
          },
        },
        {
          name: '审核状态',
          value: 'auditStateText',
          type: 'text',
        },
      ],
      dict: {},
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    apply(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await applyCheck({
            id: this.currentRow.id,
            ...this.applyForm,
          })
          this.currentRow = {}
          this.$refs[formName].resetFields()
          this.dialogClose()
          this.search()
        }
      })
    },
    //查看
    view() {},
    handleApply(row) {
      this.currentRow = row
      this.dialogVisible = true
    },
    // 一级类别change
    handleLargeOne(val) {
      if (val) {
        this.getTwoList(val)
      } else {
        this.twoList = []
      }
    },
    // 一级类别
    async getOneList() {
      await getOneList(this.$route.params.id).then((res) => {
        const { success, data } = res
        if (success) {
          this.oneList = data
        }
      })
    },
    // 二级类别
    async getTwoList(val) {
      await getTwoList(val).then((res) => {
        const { success, data } = res
        if (success) {
          this.twoList = data
        }
      })
    },
    // 编辑员工信息
    updateUser({ id }) {
      this.$router.push({
        name: 'qualityShelvesDetail',
        params: {
          id,
        },
      })
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {
      this.$router.push({
        name: 'qualityShelvesDetail',
        params: { id: 'add' },
      })
    },
    // 品牌change
    async handleCarBrand(val) {
      if (val) {
        await getSeries(val).then((res) => {
          const { success, data } = res
          if (success) this.allSeries = data
        })
      } else {
        this.allSeries = []
      }
      this.form.carSeriesId = ''
    },
  },
  async mounted() {
    this.getOneList()
    await getAllBrand().then((res) => {
      const { success, data } = res
      if (success) this.allBrand = data
    })

    const { success,data } = await getSupplierByStorId(
      this.userInfo.storeId,
      '精品供应商'
    )
    if(success){
       this.supplierList =data || []
    }

  },
}
</script>
